<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>

<%
	/*************************************************************/
	/*	[getParam]
		param: journey
		journey는 localstorage의 req에 담겨있는 많은 경로 정보수들중
		몇번째 route 인지 알 수 있는 번호 정보가 담겨있다.*/			
	/*************************************************************/
	String journey = request.getParameter("journey");
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file = "head.jsp" %>
<link rel="stylesheet" type="text/css" href="assets/css/alarm-page-style.css" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<title>alarm-page</title>
</head>

<body>
	<!-- 
	*************************************************************
		[form 태그]
		각 리스트 마다 입출력 되는 데이터 들을 가지고 있기 때문 페이지 전체 
		영역을 폼테그로 묵는다.
	*************************************************************
	 -->
	<form id="sr-to-ap" name="sr-to-ap" role="form" method="post" action="rout.jsp">
		<!-- 
		*************************************************************
			[네비게이션바]
			: 화면 상당의 네비게이션 바.
			왼 - 백 버튼
			가운데 - 페이지 타이틀
			오른 - 완료(다음 페이지로 이동)
		*************************************************************
		 -->
		<nav class="navbar navbar-fixed-top" role="navigation">
			<div class="nav_content text-center">
				<div class="pull-left">
					<div class="nav_menu_btn pull-left text-center">
						<a class="back_btn" onclick="history.back();"><i class="fa fa-arrow-left"></i></a>
					</div>
					<!-- <button id="back_btn" type="button" class="btn nav_btns nav_btn_back" onclick="history.back();"><i class="icon-arrow-left"></i></button> -->
				</div>
				<span class="page_title"><strong>알람설정</strong></span>
				<div class="submit_btn pull-right text-center">
					<a href="javascript:$('#sr-to-ap').submit();">완료</a>
				</div>
			</div>
		</nav> <!--네비게이션바 끝-->
		<!-- 
		*************************************************************
			[안내 박스]
			: 선택된 경로에 대한 기본 정보들이 출력되는 박스다.
			'from', 'to', '출발시간', '도착시간', '소요시간'이 출력된다.
		*************************************************************
		 -->
		<div class="info_bar">
			<div class="content">
				<div class="sub-header-box">
					<input type="hidden" name="journey" value="<%=journey%>"/>
					<span class="info_txt">
						<span class="text-info info_icon"><i class="fa fa-clock-o"></i></span>
						<strong><span id="duration" class="text-danger"></span>, </strong>
						<strong>도착예정: <span id="arrival_time"></span></strong><span></span>
					</span>
					<button id="viewmap" type="button" class="btn btn-info btn-xs pull-right see_map">지도보기</button>
				</div>
			</div><!--안내바 끝-->
		</div>
			
		<!-- 
		*************************************************************
			[스탭리스트]
			: 경로에 대한 이동 단계를 보여주는 박스
			javascript로 html태그와 값들이 채워진다.
		*************************************************************
		 -->
		<div class="list-box panel-group">
			<!-- 스크립트로 들어간당 ^____^ 이히힛 -->
		</div>
	</form>



	<script id="android"></script>
	<script type="text/javascript">
		/************************************************************/
		/*	[sessionstorage(req)를 localstorage(key)로]
			sessionstorage의 req에 journey번째에 있는 루트를 json현태로 변환해서
			사용할 수 있게 해준다. 그리고 localstorage이 값을 넣어 준다.		*/			
		/************************************************************/
		var key = new Date().getTime() + '' + <%=journey%>;
		var response = JSON.parse(sessionStorage["req"]);
		
		while (localStorage.length >= 10) {
			var dkey = localStorage.key(0);
			localStorage.removeItem(dkey);
		}
		
		var legs = response.routes[<%=journey.substring(13, 14)%>].legs[0];
		legs.start_address = sessionStorage["sl"];
		legs.end_address = sessionStorage["el"];
		
		var is_legs = false;
		
		if (localStorage.length > 0) {
			for (var i=0; i < localStorage.length; i++) {
				if (localStorage.getItem(localStorage.key(i)) == JSON.stringify(legs)) {
					sessionStorage["journey_key"] = localStorage.key(i);
					is_legs = true;
				}
				
				if (i == (localStorage.length - 1) && is_legs == false) {
					sessionStorage["journey_key"] = key;
					localStorage[key] = JSON.stringify(legs);
				}
			}
		} else if (localStorage.length == 0) {
			localStorage[key] = JSON.stringify(legs);
			sessionStorage["journey_key"] = key;
		}
	
		/************************************************************/
		/* 	[sessionstorage에 들어갈 변수 선언과 초기값]
			sessionstorage에 알람설정의 값이 얼마인지 알람이 켜져 있는지 꺼져있는지
			확인할 수 있는 값들을 선언한다. 
			al_info: 설정된 알람 시간, 거리값들 저장
			is_al: 알람 on/off 값들 저장... 알람 on = 1, 알람 off = 0 	*/
		/************************************************************/
		var al_info = new Array(legs.steps.length+1); 	// 알람 값들이 저장되는 어레이
		var is_al = new Array(legs.steps.length+1); 		// 구간 알람 턴/오프 데이터 어레이

		for (var i=0; i<legs.steps.length+1; i++) {
			if (i==0) {
				is_al[i] = 1;
			} else if (legs.steps[i-1].travel_mode == ("WALKING")) {
				is_al[i] = 0;
			} else {
				is_al[i] = 1;
			}
		}
		window.sessionStorage.setItem("is_al", is_al);
		
		
		/************************************************************/
		/* 	[date함수 호출]
			시간 알람의 활성화 여부를 알기 위한 date함수 호출					*/
		/************************************************************/
		var time = new Date();
		var hh = time.getHours(); // 현재 시
		var mm = time.getMinutes(); // 현재 분
		
		var dt = legs.departure_time.text.split(' ');
		var dtime = dt[1].split(':');
		var ampm = dt[0]; //출발 시간의 오전오후 변수
		var dhh = dtime[0]; // 출발 시간의 시
		var dmm = dtime[1]; // 출발 시간의 분
		if (ampm == '오후') {
			if (dhh == 12) {
				dhh = 12;
			} else {
				dhh = Number(dhh)+12;
			}
		} else if (ampm == '오전') {
			if (dhh == 12) {
				dhh = 0;
			}
		}
		
		
		
		/************************************************************/
		/*	[alarmDB open]
			alarmDB를 open한다. index.jsp에서 이미 alarmDB는 만들어 졌으므로
			alarm-page.jsp에서는 기존의 alarmDB를 호출해서 가져온다.			*/			
		/************************************************************/
		var alarmDB = {};
		alarmDB.webdb = {};
		alarmDB.webdb.db = null;
      	
		var dbSize = 1 * 1024 * 1024; // 5MB
		
		/************************************************************/
		/*	[journeyAlDB open]
			journeyAlDB를 open한다. 내 루트에 저장할 알람 데이터들을 저장하는
			공간이다.													*/			
		/************************************************************/
		var journeyAlDB = null;
		
		var userBrowser = navigator.userAgent.toLowerCase();
		
		
		
		
		/************************************************************/
		/* 	[안드로이드 폰일때]	
			안드로이드 브라우져일때								*/
		/************************************************************/
		if (userBrowser.indexOf("android") != -1){
			$('#android').attr("src", "assets/js/cordova.js");
			
			document.addEventListener("deviceready", onDeviceReady, false);
			
			function onDeviceReady() {
				alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
				journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
				
				journeyAlDB.transaction(function(tx){
					tx.executeSql("CREATE TABLE IF NOT EXISTS journeyAlDB(key, is_al, al_info)");
				});
				
				journeyAlDB.itemInsert = function(is_al, al_info) {
					journeyAlDB.transaction(function(tx){
						tx.executeSql("SELECT * FROM journeyAlDB WHERE key=?", [sessionStorage["journey_key"]], function(tx,rs) {
							if (rs.rows.length < 1) {
								journeyAlDB.transaction(function(tx){
									tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)", [sessionStorage["journey_key"], is_al, al_info], function() {
										console.log("key : " + sessionStorage["journey_key"] + ", is_al : " + is_al + ", al_info : " + al_info);
									}, function(tx, e) {
										console.log(e.message);
									});
								});
							}
						});
					});
				};
				
				journeyAlDB.itemUpdate = function(item_name, value){
					journeyAlDB.transaction(function(tx){
						tx.executeSql("UPDATE journeyAlDB SET " + item_name + "=? WHERE key=?", [value, sessionStorage["journey_key"]]);
					});
				};
				
				journeyAlDB.itemDelete = function(key) {
					journeyAlDB.transaction(function(tx){
						tx.executeSql("DELETE FROM journeyAlDB WHERE key=?", [key], function() {}, function(tx, e) {
							console.log(e.message);
						});
					});
				};
				
				/************************************************************/
				/*	[journeyAlDB의 길이 관리]
					journeyAlDB의 길이가 10보다 커지면 첫번째 항목을 지워준다.			*/			
				/************************************************************/
				journeyAlDB.transaction(function(tx){
					tx.executeSql("SELECT count(*) as cnt FROM journeyAlDB", [], 
						function(tx,rs) {
							var cnt = rs.rows.item(0)['cnt'];
							if(cnt >= 10) {
								tx.executeSql("SELECT key FROM journeyAlDB", [], 
									function(tx, rs) {
										var key = rs.rows.item(0)['key'];
										journeyAlDB.itemDelete(key);
									}, function(tx, e) {
										console.log(e.message);
									}
								);
							}
						}, function(tx, e) {
							console.log(e.message);
						}
					);
				});
				
				/************************************************************/
				/* 	[function isBtnClick()]
					시간 알람이 가지는 예외들을 불류하고 처리한다.						*/
				/************************************************************/
				function isBtnClick() {
					if(hh > dhh) {
						$('#altime20btn').attr("disabled","disable");
						$('#altime20btn').removeClass('btn-primary');
						
						$('#altime15btn').attr("disabled","disable");
						$('#altime15btn').removeClass('btn-success');
						
						$('#altime10btn').attr("disabled","disable");
						$('#altime10btn').removeClass('btn-warning');
						
						$('#altime5btn').attr("disabled","disable");
						$('#altime5btn').removeClass("btn-danger");
						
						$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
						$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
						is_al[0] = 0;
					} else if(hh == dhh){
						if (mm+20 >= dmm) {
							$('#altime20btn').attr("disabled","disable");
							$('#altime20btn').removeClass("btn-primary");
							$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">15분전</span>');
							if(mm+15 >= dmm) {
								$('#altime15btn').attr("disabled","disable");
								$('#altime15btn').removeClass('btn-success');
								$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">10분전</span>');
								if(mm+10 >= dmm) {
									$('#altime10btn').attr("disabled","disable");
									$('#altime10btn').removeClass('btn-warning');
									$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">5분전</span>');
									if(mm+5 >= dmm) {
										$('#altime5btn').attr("disabled","disable");
										$('#altime5btn').removeClass("btn-danger");
										
										$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
										$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
										is_al[0] = 0;
									}
								}
							}
						}
					} else if(hh < dhh) {
						if(mm+20 >= 60) {
							if(-40 >= dmm-mm) {
								$('#altime20btn').attr("disabled","disable");
								$('#altime20btn').removeClass("btn-primary");
								$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">15분전</span>');
								if(-45 >= dmm-mm) {
									$('#altime15btn').attr("disabled","disable");
									$('#altime15btn').removeClass('btn-success');
									$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">10분전</span>');
									if(-50 >= dmm-mm) {
										$('#altime10btn').attr("disabled","disable");
										$('#altime10btn').removeClass('btn-warning');
										$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">5분전</span>');
										if(-55 >= dmm-mm) {
											$('#altime5btn').attr("disabled","disable");
											$('#altime5btn').removeClass('btn-danger');
											
											$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
											$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
											is_al[0] = 0;
										}
									}
								}
							}
						}
					}
					window.sessionStorage.setItem("is_al", is_al);
					journeyAlDB.itemUpdate("is_al", is_al);
				}
				
				/************************************************************/
				/* 	[function html_getAlset(i)]
					param i = step번호 0부터 step수 만큼 번호가 붙는다.
					param x = 시간이나 거리값을 받는다.							
					
					선택되는 알람 설정 값들을 html태그에 날려주고 sessionstorage의
					al_info를 업데이트 시켜준다.									*/
				/************************************************************/
				
				function html_getAlset(i, x) {
					if(i==0) {
						$('#altime'+i).html(x+"분전");
					} else {
						$('#altime'+i).html(x+"m전");
					}
					
					al_info[i] = x;
					window.sessionStorage.setItem("al_info", al_info);
					journeyAlDB.itemUpdate("al_info", al_info);
				}
				
				/************************************************************/
				/* 	[function setAlthumb(i)]
					param i = step번호 0부터 step수 만큼 번호가 붙는다.				
					
					알람 온/오프 섬네일을 컨트롤 한다. 그리고 sessionstorage의 is_al에
					그 값을 날린다.												*/
				/************************************************************/
				function setAlthumb(i) {
					$('#althumb'+ i).toggleClass("text-danger");
					$('#althumb'+ i).toggleClass("text-muted");
					if(is_al[i]==1) {
						is_al[i] = 0;
					} else {
						is_al[i] = 1;
					}
					window.sessionStorage.setItem("is_al", is_al);
					journeyAlDB.itemUpdate("is_al", is_al);
				}
				
				/************************************************************/
				/* 	[function setColhidden(i)]
					param i = step번호 0부터 step수 만큼 번호가 붙는다.				
					
					localstorage에 사용하는 루트의 steps가 WALKING이라는 travel-
					mode를 가지고 있다면 해당 step의 알람설정 버튼을 hidden시켜준다.
					
					- 사용 시간 전역변수들
					var time = new Date();
					var hh = time.getHours(); // 현재 시
					var mm = time.getMinutes(); // 현재 분
					var dt = legs.departure_time.text.split(' ');
					var dtime = dt[1].split(':');
					var ampm = dt[0]; //출발 시간의 오전오후 변수
					var dhh = dtime[0]; // 출발 시간의 시
					var dmm = dtime[1]; // 출발 시간의 분
					if (ampm == '오후') {
						dhh = Number(dhh)+12;
					}														*/
				/************************************************************/
				function setColhidden(i) {
					if(i==0) {
						if(hh > dhh) {
							$('#collapse'+i).addClass('hidden');
						} else if(hh == dhh){
							if(mm+5 >= dmm) {
								$('#collapse'+i).addClass('hidden');
							}
						} else if(hh < dhh) {
							if((mm+5-60-dmm) >= dmm) {
								$('#collapse'+i).addClass('hidden');
							}
						}
					} else if(i>0){
						if(legs.steps[i-1].travel_mode == ("WALKING")) {
							$('#collapse'+i).addClass('hidden');
						}
					}
				}

				/*************************************************************/
				/*	[function html_getAlDB()]
					alarmDB의 key 값과 value 값을 셀렉트하고 html과 섹션스토리지에 
					뿌려 준다.*/			
				/*************************************************************/
				function html_getAlDB() {
					alarmDB.webdb.db.transaction(function(tx){
						var sql = 'SELECT * FROM alarmDB';
						tx.executeSql(sql, [], function(tx, rs) {
							for (var i=0; i<rs.rows.length; i++) {
								if(rs.rows.item(i).key == "is_alarm") {
									if(rs.rows.item(i).value == "false") {
										for(var j=0; j<legs.steps.length+1; j++){
											$("a#althumb"+j).removeClass("text-danger");
											$("a#althumb"+j).addClass("text-muted");
											is_al[j] = 0;
											window.sessionStorage.setItem("is_al", is_al);
											journeyAlDB.itemUpdate("is_al", is_al);
										}
									}
								} else if(rs.rows.item(i).key == "set_time") {
									if(rs.rows.item(i).value == 5) {
										$("#altime0").html("5분전");
										al_info[0] = 5;
									} else if(rs.rows.item(i).value == 10) {
										$("#altime0").html("10분전");
										al_info[0] = 10;
									} else if(rs.rows.item(i).value == 15) {
										$("#altime0").html("15분전");
										al_info[0] = 15;
									} else if(rs.rows.item(i).value == 20) {
										$("#altime0").html("20분전");
										al_info[0] = 20;
									}
								} else if (rs.rows.item(i).key == "set_dis") {
									if(rs.rows.item(i).value == 30) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
													$("#altime"+j).html("30m전");
													al_info[j] = 30;
												}
											} else {
												al_info[j] = 0;
											}
											
										}
									} else if(rs.rows.item(i).value == 50) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if(legs.steps[j-1].transit.line.vehicle.type == "BUS") {
													$("#altime"+j).html("50m전");
													al_info[j] = 50;
												}
											} else {
												al_info[j] = 0;
											}
										}
									} else if(rs.rows.item(i).value == 100) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
													$("#altime"+j).html("100m전");
													al_info[j] = 100;
												}
											} else {
												al_info[j] = 0;
											}
										}
									} else if(rs.rows.item(i).value == 150) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
													$("#altime"+j).html("150m전");
													al_info[j] = 150;
												}
											} else {
												al_info[j] = 0;
											}
										}
									}
								} else if (rs.rows.item(i).key == "set_dis2") {
									if(rs.rows.item(i).value == 250) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
													$("#altime"+j).html("250m전");
													al_info[j] = 250;
												}
											} else {
												al_info[j] = 0;
											}
										}
									} else if(rs.rows.item(i).value == 500) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
													$("#altime"+j).html("500m전");
													al_info[j] = 500;
												}
											} else {
												al_info[j] = 0;
											}
										}
									} else if(rs.rows.item(i).value == 7500) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
													$("#altime"+j).html("750m전");
													al_info[j] = 750;
												}
											} else {
												al_info[j] = 0;
											}
										}
									} else if(rs.rows.item(i).value == 1000) {
										for(var j=1; j<legs.steps.length+1; j++) {
											if (legs.steps[j-1].travel_mode != ("WALKING")) {
												if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
													$("#altime"+j).html("1km전");
													al_info[j] = 1000;
												}
											} else {
												al_info[j] = 0;
											}
										}
									}
								}
							}
							window.sessionStorage.setItem("al_info", al_info);
							journeyAlDB.itemUpdate("al_info", al_info);
						});
					});
				}
					
				/************************************************************/
				/* 	[스탭리스트]
					html 코드에서 <div class="list-box panel-group">에 값들이
					대입된다.													
					
					travelmode가 walking일 경우 session스토리지에 저장되는 내용이
					다른 교통수단과 달라서 따로 조건을 만들어야 한다.					*/
				/************************************************************/	
				$(function(){
					var htmltxt = '';
					for (var i=0; i<legs.steps.length+1; i++) {
						htmltxt += 	'<div class="list-case">';						
						htmltxt += 		'<div class="content">';
						htmltxt +=			'<div>';								
						htmltxt +=				'<div class="panel-heading">';		
						htmltxt += 					'<div class="panel-title">';
						htmltxt += 						'<div>';
						
						/************************************************************/
						/* 	[출발지 알람]
							출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
						/************************************************************/
						if (i==0) {
							htmltxt +=						'<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';					
							// 리스트 전체를 감싸는 a 태그
							htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
							htmltxt +=							'<div>';
							htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
							// 아이콘 이프문
							if (legs.steps[i].travel_mode == ("WALKING")) {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
							} else {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
							}
							htmltxt +=							'</div>'; // 설정없는 div 박스 끝
							
							htmltxt +=							'<div class="loca-name">';
							// 아이콘 이프문
							if (legs.steps[i].travel_mode == ("WALKING")) {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
							} else {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
							}
							htmltxt +=							sessionStorage.getItem("sl") + '에서 출발';
							htmltxt +=							'</div>'; // <div class="loca-name"> 끝
							htmltxt +=							'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
							htmltxt +=							'<div class="sub_info" id="alinfotxt"><span>알람설정: 출발 <span id="altime' + i + '" class="text-warning">10분</span></span></div>';
							htmltxt +=						'</a>' // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
							al_info[i] = 10;
						} else { // i가 0이 아닐 때, steps에는 -1
							/************************************************************/
							/* 	[알람 온/오프 섬네일]
								알람을 온/오프상태를 표지해주는 섬네일을 조건에 따라 표시해준다.		*/
							/************************************************************/
							if (legs.steps[i-1].travel_mode != ("WALKING")) {
								htmltxt +=					'<a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a>';	
							} else {
								htmltxt +=					'<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';	
							}
							/************************************************************/
							// 리스트 전체를 감싸는 a 태그
							htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
							
							/************************************************************/
							/* 	[stpes의 travel_mode 표시]
								스탭의 번호와 이동모드를 아이콘으로 표시해준다.
								
								legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
								경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
							/************************************************************/
							htmltxt +=							'<div>';
							htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
							if (legs.steps[i-1].travel_mode == ("WALKING")) {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
							} else {
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							}
							htmltxt +=								'<strong class="text-danger">' + legs.steps[i-1].duration.text + '</strong>';
							htmltxt +=							'</div>';
							/********** 각 스탭들 내용 *********/ 
							if (legs.steps[i-1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
								htmltxt +=						'<div class="loca-name">';
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
								htmltxt +=							'<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>' + legs.steps[i-1].transit.line.short_name + '</strong></span>';
								htmltxt +=							legs.steps[i-1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
								htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
								htmltxt +=							legs.steps[i-1].transit.arrival_stop.name;
								htmltxt +=						'</div>';
								htmltxt +=						'<div class="sub_info">출발시간: <strong>' + legs.steps[i-1].transit.departure_time.text + '</strong></div>';
								htmltxt +=						'<div class="sub_info"><span>알람설정: <img class="icon-pos1" style="height: 12px; width: 12px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">' + legs.steps[i-1].transit.arrival_stop.name + ' 도착 <span id="altime' + i +'" class="text-warning">100m전</span></span></div>';
							} else { // 만약 도보일 경우 리스트
								if (i==1) {
									htmltxt +=					'<div class="loca-name">';
									htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
									htmltxt +=						sessionStorage.getItem("sl") + ' <i class="fa fa-caret-right"></i> ';
									htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
									htmltxt +=						legs.steps[i].transit.departure_stop.name;
									htmltxt +=					'</div>';
									htmltxt +=					'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
									htmltxt +=					'<div class="sub_info"><span>알람설정: <span id="altime' + i + '" class="text-warning">도보 시 알람을 설정할 수 없습니다.</span></span></div>';
								} else {
									htmltxt +=					'<div class="loca-name">';
									htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
									htmltxt +=						legs.steps[i-2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
									if (i+1 < legs.steps.length+1) {
										htmltxt +=					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
										htmltxt +=					legs.steps[i].transit.departure_stop.name;
									} else { // 마지막 스탭일 경우
										htmltxt +=					sessionStorage.getItem("el");
									}
									htmltxt +=					'</div>';
									htmltxt +=					'<div class="sub_info">출발시간: <strong>' + legs.steps[i-2].transit.arrival_time.text + '</strong></div>';
									htmltxt +=					'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">도보 시 알람을 설정할 수 없습니다.</span></span></div>';
								}
							}
							al_info[i] = 100;
							htmltxt +=						'</a>'; // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
						} // i가 0이 아닌, else문 종료						
						htmltxt += 						'</div>';
						htmltxt +=					'</div>'; // <div class="panel-title"> 끝
						htmltxt += 				'</div>'; // <div class="panel-heading"> 끝	
						htmltxt +=			'</div>'; // ㅡ,.ㅡ 내가 적고도 왜 있는지 모르는 div 박스 끝
						htmltxt += 		'</div>'; // <div class="container"> 끝
						// 알람 설정 아코디언 하단 메뉴
						htmltxt +=		'<div id="collapse' + i + '" class="panel-collapse collapse">'; // 아코디언 메뉴.
						htmltxt +=			'<div class="panel-body row">';
						if (i==0) {
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime20btn" class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',20); return false;">20분전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime15btn" class="btn btn-success albtns" onclick="html_getAlset(' + i + ',15); return false;">15분전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime10btn" class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',10); return false;">10분전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime5btn" class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',5); return false;">5분전</button></span>';
						} else if (legs.steps[i-1].travel_mode != "WALKING") {
							if(legs.steps[i-1].transit.line.vehicle.type != "BUS")  {
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',1000); return false;">1km전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-success albtns" onclick="html_getAlset(' + i + ',750); return false;">750m전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',500); return false;" >500m전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',250); return false;">250m전</button></span>';
							} else {
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',150); return false;">150m전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-success albtns" onclick="html_getAlset(' + i + ',100); return false;">100m전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',50); return false;" >50m전</button></span>';
								htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',30); return false;">30m전</button></span>';
							}
						}
						htmltxt +=			'</div>';
						htmltxt +=		'</div>';
						htmltxt += 	'</div>'; // <div class="list-case"> 끝
						
						//sessionStorage에 al_info 저장
						window.sessionStorage.setItem("al_info", al_info);
					}
					
					/************************************************************/
					/* 	[html에 LocalStorage에 있는 해당 내용 입력]					*/
					/************************************************************/
					$('.list-box').html(htmltxt);
					
					$('#start_address').html(legs.start_address);
					$('#end_address').html(legs.end_address);
					$('#departure_time').html(legs.departure_time.text);
					$('#arrival_time').html(legs.arrival_time.text);
					$('#duration').html(legs.duration.text);
					
					/************************************************************/
					/* 	[지도보기]	
						이동 경로를 지도에서 보여준다.									*/
					/************************************************************/
					$('#viewmap').click(function() {
						var viewmap = '';
						viewmap += 'journey.jsp';
						viewmap += '?start=';
						viewmap += legs.start_location.nb + "," + legs.start_location.ob;
						viewmap += '&end=';
						viewmap += legs.end_location.nb + "," + legs.end_location.ob;
						viewmap += '&time=';
						viewmap += <%=journey.substring(0, 10)%>;
						viewmap += '&journey=';
						viewmap += <%=journey.substring(13, 14)%>;
						location.href = viewmap;
					});
					
					
					html_getAlDB(); // 디비값들 html에 적용
					isBtnClick(); // 시간 알람에 대한 함수
					journeyAlDB.itemInsert(is_al, al_info); //journeyAlDB의 초기값
				});
			}
		} else {
			
			/************************************************************/
			/* 	[일반 웹일때]	
				안드로이드 브라우져가 아닌 웹일때								*/
			/************************************************************/
			alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
			journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
			
			journeyAlDB.transaction(function(tx){
				tx.executeSql("CREATE TABLE IF NOT EXISTS journeyAlDB(key, is_al, al_info)");
			});
			
			journeyAlDB.itemInsert = function(is_al, al_info) {
				journeyAlDB.transaction(function(tx){
					tx.executeSql("SELECT * FROM journeyAlDB WHERE key=?", [sessionStorage["journey_key"]], function(tx,rs) {
						if (rs.rows.length < 1) {
							journeyAlDB.transaction(function(tx){
								tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)", [sessionStorage["journey_key"], is_al, al_info], function() {
									console.log("key : " + sessionStorage["journey_key"] + ", is_al : " + is_al + ", al_info : " + al_info);
								}, function(tx, e) {
									console.log(e.message);
								});
							});
						}
					});
				});
			};
			
			journeyAlDB.itemUpdate = function(item_name, value){
				journeyAlDB.transaction(function(tx){
					tx.executeSql("UPDATE journeyAlDB SET " + item_name + "=? WHERE key=?", [value, sessionStorage["journey_key"]]);
				});
			};
			
			journeyAlDB.itemDelete = function(key) {
				journeyAlDB.transaction(function(tx){
					tx.executeSql("DELETE FROM journeyAlDB WHERE key=?", [key], function() {}, function(tx, e) {
						console.log(e.message);
					});
				});
			};
			
			/************************************************************/
			/*	[journeyAlDB의 길이 관리]
				journeyAlDB의 길이가 10보다 커지면 첫번째 항목을 지워준다.			*/			
			/************************************************************/
			journeyAlDB.transaction(function(tx){
				tx.executeSql("SELECT count(*) as cnt FROM journeyAlDB", [], 
					function(tx,rs) {
						var cnt = rs.rows.item(0)['cnt'];
						if(cnt >= 10) {
							tx.executeSql("SELECT key FROM journeyAlDB", [], 
								function(tx, rs) {
									var key = rs.rows.item(0)['key'];
									journeyAlDB.itemDelete(key);
								}, function(tx, e) {
									console.log(e.message);
								}
							);
						}
					}, function(tx, e) {
						console.log(e.message);
					}
				);
			});
			
			/************************************************************/
			/* 	[function isBtnClick()]
				시간 알람이 가지는 예외들을 불류하고 처리한다.						*/
			/************************************************************/
			function isBtnClick() {
				if(hh > dhh) {
					$('#altime20btn').attr("disabled","disable");
					$('#altime20btn').removeClass('btn-primary');
					
					$('#altime15btn').attr("disabled","disable");
					$('#altime15btn').removeClass('btn-success');
					
					$('#altime10btn').attr("disabled","disable");
					$('#altime10btn').removeClass('btn-warning');
					
					$('#altime5btn').attr("disabled","disable");
					$('#altime5btn').removeClass("btn-danger");
					
					$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
					$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
					is_al[0] = 0;
				} else if(hh == dhh){
					if (mm+20 >= dmm) {
						$('#altime20btn').attr("disabled","disable");
						$('#altime20btn').removeClass("btn-primary");
						$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">15분전</span>');
						if(mm+15 >= dmm) {
							$('#altime15btn').attr("disabled","disable");
							$('#altime15btn').removeClass('btn-success');
							$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">10분전</span>');
							if(mm+10 >= dmm) {
								$('#altime10btn').attr("disabled","disable");
								$('#altime10btn').removeClass('btn-warning');
								$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">5분전</span>');
								if(mm+5 >= dmm) {
									$('#altime5btn').attr("disabled","disable");
									$('#altime5btn').removeClass("btn-danger");
									
									$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
									$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
									is_al[0] = 0;
								}
							}
						}
					}
				} else if(hh < dhh) {
					if(mm+20 >= 60) {
						if(-40 >= dmm-mm) {
							$('#altime20btn').attr("disabled","disable");
							$('#altime20btn').removeClass("btn-primary");
							$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">15분전</span>');
							if(-45 >= dmm-mm) {
								$('#altime15btn').attr("disabled","disable");
								$('#altime15btn').removeClass('btn-success');
								$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">10분전</span>');
								if(-50 >= dmm-mm) {
									$('#altime10btn').attr("disabled","disable");
									$('#altime10btn').removeClass('btn-warning');
									$('#alinfotxt').html('알람설정: 출발 <span class="text-warning">5분전</span>');
									if(-55 >= dmm-mm) {
										$('#altime5btn').attr("disabled","disable");
										$('#altime5btn').removeClass('btn-danger');
										
										$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없습니다.</span>');
										$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
										is_al[0] = 0;
									}
								}
							}
						}
					}
				}
				window.sessionStorage.setItem("is_al", is_al);
				journeyAlDB.itemUpdate("is_al", is_al);
			}
			
			/************************************************************/
			/* 	[function html_getAlset(i)]
				param i = step번호 0부터 step수 만큼 번호가 붙는다.
				param x = 시간이나 거리값을 받는다.							
				
				선택되는 알람 설정 값들을 html태그에 날려주고 sessionstorage의
				al_info를 업데이트 시켜준다.									*/
			/************************************************************/
			
			function html_getAlset(i, x) {
				if(i==0) {
					$('#altime'+i).html(x+"분전");
				} else {
					$('#altime'+i).html(x+"m전");
				}
				
				al_info[i] = x;
				window.sessionStorage.setItem("al_info", al_info);
				journeyAlDB.itemUpdate("al_info", al_info);
			}
			
			/************************************************************/
			/* 	[function setAlthumb(i)]
				param i = step번호 0부터 step수 만큼 번호가 붙는다.				
				
				알람 온/오프 섬네일을 컨트롤 한다. 그리고 sessionstorage의 is_al에
				그 값을 날린다.												*/
			/************************************************************/
			function setAlthumb(i) {
				$('#althumb'+ i).toggleClass("text-danger");
				$('#althumb'+ i).toggleClass("text-muted");
				if(is_al[i]==1) {
					is_al[i] = 0;
				} else {
					is_al[i] = 1;
				}
				window.sessionStorage.setItem("is_al", is_al);
				journeyAlDB.itemUpdate("is_al", is_al);
			}
			
			/************************************************************/
			/* 	[function setColhidden(i)]
				param i = step번호 0부터 step수 만큼 번호가 붙는다.				
				
				localstorage에 사용하는 루트의 steps가 WALKING이라는 travel-
				mode를 가지고 있다면 해당 step의 알람설정 버튼을 hidden시켜준다.
				
				- 사용 시간 전역변수들
				var time = new Date();
				var hh = time.getHours(); // 현재 시
				var mm = time.getMinutes(); // 현재 분
				var dt = legs.departure_time.text.split(' ');
				var dtime = dt[1].split(':');
				var ampm = dt[0]; //출발 시간의 오전오후 변수
				var dhh = dtime[0]; // 출발 시간의 시
				var dmm = dtime[1]; // 출발 시간의 분
				if (ampm == '오후') {
					dhh = Number(dhh)+12;
				}														*/
			/************************************************************/
			function setColhidden(i) {
				if(i==0) {
					if(hh > dhh) {
						$('#collapse'+i).addClass('hidden');
					} else if(hh == dhh){
						if(mm+5 >= dmm) {
							$('#collapse'+i).addClass('hidden');
						}
					} else if(hh < dhh) {
						if((mm+5-60-dmm) >= dmm) {
							$('#collapse'+i).addClass('hidden');
						}
					}
				} else if(i>0){
					if(legs.steps[i-1].travel_mode == ("WALKING")) {
						$('#collapse'+i).addClass('hidden');
					}
				}
			}

			/*************************************************************/
			/*	[function html_getAlDB()]
				alarmDB의 key 값과 value 값을 셀렉트하고 html과 섹션스토리지에 
				뿌려 준다.*/			
			/*************************************************************/
			function html_getAlDB() {
				alarmDB.webdb.db.transaction(function(tx){
					var sql = 'SELECT * FROM alarmDB';
					tx.executeSql(sql, [], function(tx, rs) {
						for (var i=0; i<rs.rows.length; i++) {
							if(rs.rows.item(i).key == "is_alarm") {
								if(rs.rows.item(i).value == "false") {
									for(var j=0; j<legs.steps.length+1; j++){
										$("a#althumb"+j).removeClass("text-danger");
										$("a#althumb"+j).addClass("text-muted");
										is_al[j] = 0;
										window.sessionStorage.setItem("is_al", is_al);
										journeyAlDB.itemUpdate("is_al", is_al);
									}
								}
							}else if(rs.rows.item(i).key == "set_time") {
								if(rs.rows.item(i).value == 5) {
									$("#altime0").html("5분전");
									al_info[0] = 5;
								} else if(rs.rows.item(i).value == 10) {
									$("#altime0").html("10분전");
									al_info[0] = 10;
								} else if(rs.rows.item(i).value == 15) {
									$("#altime0").html("15분전");
									al_info[0] = 15;
								} else if(rs.rows.item(i).value == 20) {
									$("#altime0").html("20분전");
									al_info[0] = 20;
								}
							} else if (rs.rows.item(i).key == "set_dis") {
								if(rs.rows.item(i).value == 30) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
												$("#altime"+j).html("30m전");
												al_info[j] = 30;
											}
										} else {
											al_info[j] = 0;
										}
										
									}
								} else if(rs.rows.item(i).value == 50) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if(legs.steps[j-1].transit.line.vehicle.type == "BUS") {
												$("#altime"+j).html("50m전");
												al_info[j] = 50;
											}
										} else {
											al_info[j] = 0;
										}
									}
								} else if(rs.rows.item(i).value == 100) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
												$("#altime"+j).html("100m전");
												al_info[j] = 100;
											}
										} else {
											al_info[j] = 0;
										}
									}
								} else if(rs.rows.item(i).value == 150) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if (legs.steps[j-1].transit.line.vehicle.type == "BUS") {
												$("#altime"+j).html("150m전");
												al_info[j] = 150;
											}
										} else {
											al_info[j] = 0;
										}
									}
								}
							} else if (rs.rows.item(i).key == "set_dis2") {
								if(rs.rows.item(i).value == 250) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
												$("#altime"+j).html("250m전");
												al_info[j] = 250;
											}
										} else {
											al_info[j] = 0;
										}
									}
								} else if(rs.rows.item(i).value == 500) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
												$("#altime"+j).html("500m전");
												al_info[j] = 500;
											}
										} else {
											al_info[j] = 0;
										}
									}
								} else if(rs.rows.item(i).value == 7500) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
												$("#altime"+j).html("750m전");
												al_info[j] = 750;
											}
										} else {
											al_info[j] = 0;
										}
									}
								} else if(rs.rows.item(i).value == 1000) {
									for(var j=1; j<legs.steps.length+1; j++) {
										if (legs.steps[j-1].travel_mode != ("WALKING")) {
											if(legs.steps[j-1].transit.line.vehicle.type != "BUS") {
												$("#altime"+j).html("1km전");
												al_info[j] = 1000;
											}
										} else {
											al_info[j] = 0;
										}
									}
								}
							}
						}
						window.sessionStorage.setItem("al_info", al_info);
						journeyAlDB.itemUpdate("al_info", al_info);
					});
				});
			}
				
			/************************************************************/
			/* 	[스탭리스트]
				html 코드에서 <div class="list-box panel-group">에 값들이
				대입된다.													
				
				travelmode가 walking일 경우 session스토리지에 저장되는 내용이
				다른 교통수단과 달라서 따로 조건을 만들어야 한다.					*/
			/************************************************************/	
			$(function(){
				var htmltxt = '';
				for (var i=0; i<legs.steps.length+1; i++) {
					htmltxt += 	'<div class="list-case">';						
					htmltxt += 		'<div class="content">';
					htmltxt +=			'<div>';								
					htmltxt +=				'<div class="panel-heading">';		
					htmltxt += 					'<div class="panel-title">';
					htmltxt += 						'<div>';
					
					/************************************************************/
					/* 	[출발지 알람]
						출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
					/************************************************************/
					if (i==0) {
						htmltxt +=						'<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';					
						// 리스트 전체를 감싸는 a 태그
						htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
						htmltxt +=							'<div>';
						htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt +=							'</div>'; // 설정없는 div 박스 끝
						
						htmltxt +=							'<div class="loca-name">';
						// 아이콘 이프문
						if (legs.steps[i].travel_mode == ("WALKING")) {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
						}
						htmltxt +=							sessionStorage.getItem("sl") + '에서 출발';
						htmltxt +=							'</div>'; // <div class="loca-name"> 끝
						htmltxt +=							'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
						htmltxt +=							'<div class="sub_info" id="alinfotxt"><span>알람설정: 출발 <span id="altime' + i + '" class="text-warning">10분</span></span></div>';
						htmltxt +=						'</a>' // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
						al_info[i] = 10;
					} else { // i가 0이 아닐 때, steps에는 -1
						/************************************************************/
						/* 	[알람 온/오프 섬네일]
							알람을 온/오프상태를 표지해주는 섬네일을 조건에 따라 표시해준다.		*/
						/************************************************************/
						if (legs.steps[i-1].travel_mode != ("WALKING")) {
							htmltxt +=					'<a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a>';	
						} else {
							htmltxt +=					'<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';	
						}
						/************************************************************/
						// 리스트 전체를 감싸는 a 태그
						htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
						
						/************************************************************/
						/* 	[stpes의 travel_mode 표시]
							스탭의 번호와 이동모드를 아이콘으로 표시해준다.
							
							legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
							경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
						/************************************************************/
						htmltxt +=							'<div>';
						htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
						if (legs.steps[i-1].travel_mode == ("WALKING")) {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
						} else {
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						}
						htmltxt +=								'<strong class="text-danger">' + legs.steps[i-1].duration.text + '</strong>';
						htmltxt +=							'</div>';
						/********** 각 스탭들 내용 *********/ 
						if (legs.steps[i-1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
							htmltxt +=						'<div class="loca-name">';
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt +=							'<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>' + legs.steps[i-1].transit.line.short_name + '</strong></span>';
							htmltxt +=							legs.steps[i-1].transit.departure_stop.name + ' <i class="fa fa-caret-right"></i> ';
							htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
							htmltxt +=							legs.steps[i-1].transit.arrival_stop.name;
							htmltxt +=						'</div>';
							htmltxt +=						'<div class="sub_info">출발시간: <strong>' + legs.steps[i-1].transit.departure_time.text + '</strong></div>';
							htmltxt +=						'<div class="sub_info"><span>알람설정: <img class="icon-pos1" style="height: 12px; width: 12px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">' + legs.steps[i-1].transit.arrival_stop.name + ' 도착 <span id="altime' + i +'" class="text-warning">100m전</span></span></div>';
						} else { // 만약 도보일 경우 리스트
							if (i==1) {
								htmltxt +=					'<div class="loca-name">';
								htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
								htmltxt +=						sessionStorage.getItem("sl") + ' <i class="fa fa-caret-right"></i> ';
								htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
								htmltxt +=						legs.steps[i].transit.departure_stop.name;
								htmltxt +=					'</div>';
								htmltxt +=					'<div class="sub_info">출발시간: <strong>' + legs.departure_time.text + '</strong></div>';
								htmltxt +=					'<div class="sub_info"><span>알람설정: <span id="altime' + i + '" class="text-warning">도보 시 알람을 설정할 수 없습니다.</span></span></div>';
							} else {
								htmltxt +=					'<div class="loca-name">';
								htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
								htmltxt +=						legs.steps[i-2].transit.arrival_stop.name + ' <i class="fa fa-caret-right"></i> ';
								if (i+1 < legs.steps.length+1) {
									htmltxt +=					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
									htmltxt +=					legs.steps[i].transit.departure_stop.name;
								} else { // 마지막 스탭일 경우
									htmltxt +=					sessionStorage.getItem("el");
								}
								htmltxt +=					'</div>';
								htmltxt +=					'<div class="sub_info">출발시간: <strong>' + legs.steps[i-2].transit.arrival_time.text + '</strong></div>';
								htmltxt +=					'<div class="sub_info"><span>알람설정: <span id="altime' + i +'" class="text-warning">도보 시 알람을 설정할 수 없습니다.</span></span></div>';
							}
						}
						al_info[i] = 100;
						htmltxt +=						'</a>'; // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
					} // i가 0이 아닌, else문 종료						
					htmltxt += 						'</div>';
					htmltxt +=					'</div>'; // <div class="panel-title"> 끝
					htmltxt += 				'</div>'; // <div class="panel-heading"> 끝	
					htmltxt +=			'</div>'; // ㅡ,.ㅡ 내가 적고도 왜 있는지 모르는 div 박스 끝
					htmltxt += 		'</div>'; // <div class="container"> 끝
					// 알람 설정 아코디언 하단 메뉴
					htmltxt +=		'<div id="collapse' + i + '" class="panel-collapse collapse">'; // 아코디언 메뉴.
					htmltxt +=			'<div class="panel-body row">';
					if (i==0) {
						htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime20btn" class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',20); return false;">20분전</button></span>';
						htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime15btn" class="btn btn-success albtns" onclick="html_getAlset(' + i + ',15); return false;">15분전</button></span>';
						htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime10btn" class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',10); return false;">10분전</button></span>';
						htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime5btn" class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',5); return false;">5분전</button></span>';
					} else if (legs.steps[i-1].travel_mode != "WALKING") {
						if(legs.steps[i-1].transit.line.vehicle.type != "BUS")  {
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',1000); return false;">1km전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-success albtns" onclick="html_getAlset(' + i + ',750); return false;">750m전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',500); return false;" >500m전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',250); return false;">250m전</button></span>';
						} else {
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',150); return false;">150m전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-success albtns" onclick="html_getAlset(' + i + ',100); return false;">100m전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',50); return false;" >50m전</button></span>';
							htmltxt +=			'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',30); return false;">30m전</button></span>';
						}
					}
					htmltxt +=			'</div>';
					htmltxt +=		'</div>';
					htmltxt += 	'</div>'; // <div class="list-case"> 끝
					
					//sessionStorage에 al_info 저장
					window.sessionStorage.setItem("al_info", al_info);
				}
				
				/************************************************************/
				/* 	[html에 LocalStorage에 있는 해당 내용 입력]					*/
				/************************************************************/
				$('.list-box').html(htmltxt);
				
				$('#start_address').html(legs.start_address);
				$('#end_address').html(legs.end_address);
				$('#departure_time').html(legs.departure_time.text);
				$('#arrival_time').html(legs.arrival_time.text);
				$('#duration').html(legs.duration.text);
				
				/************************************************************/
				/* 	[지도보기]	
					이동 경로를 지도에서 보여준다.									*/
				/************************************************************/
				$('#viewmap').click(function() {
					var viewmap = '';
					viewmap += 'journey.jsp';
					viewmap += '?start=';
					viewmap += legs.start_location.nb + "," + legs.start_location.ob;
					viewmap += '&end=';
					viewmap += legs.end_location.nb + "," + legs.end_location.ob;
					viewmap += '&time=';
					viewmap += <%=journey.substring(0, 10)%>;
					viewmap += '&journey=';
					viewmap += <%=journey.substring(13, 14)%>;
					location.href = viewmap;
				});
				
				
				html_getAlDB(); // 디비값들 html에 적용
				isBtnClick(); // 시간 알람에 대한 함수
				journeyAlDB.itemInsert(is_al, al_info); //journeyAlDB의 초기값
			});
		}			
	</script>
</body>
</html>